<template>
    <div class="layout">
        <!--商品详情头部-->
        <div class="header">商品详情</div>
        <!--商品图片轮播-->
        <div class="productImg">
            <mt-swipe :auto="3000">
                <mt-swipe-item v-for="(item,index) in productDetail.pics" :key="index">
                    <a href="javascript:void(0)">
                        <img :src="item" alt="">
                    </a>
                </mt-swipe-item>
            </mt-swipe>
        </div>
        <!--商品名称-->
        <div class="productName">
            <div class="name">{{productDetail.productName}}</div>
            <div class="price">¥&nbsp;{{productDetail.price}}</div>
            <div class="diamondAndCash">钻石 :&nbsp;{{productDetail.diamond}}&nbsp;&nbsp;现金 :&nbsp;{{productDetail.diamondPrice}}</div>
            <div class="salesCount">已售<span>85</span>件</div>
        </div>
        <!--商品喜欢人数-->
        <div class="like">
            <div class="likeCout"><span>{{love.loveCount}}</span>人喜欢</div>
            <div class="userImg">
                <ul>
                    <li class="user" v-for="(item,index) in love.loveList" :key="index"><img :src="item" alt=""></li> 
                </ul>
            </div>
            <div class="thanks">谢谢你的喜欢</div>
            <div class="addClic">
                <div class="heart"></div>
            </div>
        </div>
        <!--商品信息和评论-->
        <div class="msgAndcomments">
            <div class="btn">
                <a :class="{msg:true,btnActive:msgBtnStatus}" href="#/msg" @click="changeMsgBtnStatus()">商品详情</a>
                <a :class="{comments:true,btnActive:commentBtnStatus}" href="#/comments" @click="changeCommentBtnStatus()">累计评价(16)</a>
            </div>
            <router-view v-show="commentBtnStatus"></router-view>
            <productMsg v-show="msgBtnStatus"></productMsg>
        </div>   
        <!--商品详情页底部-->
        <div class="footer" @click="getPhoneSystem()">
            <div class="howToBuy">请打开惊喜app进行购买,如未安装惊喜app,请去下载。</div>
            <div class="toDownLoadApp">去下载APP</div>
        </div>
    </div>
</template>
<style lang="less">
    @import "./static/css/productDetail/productDetail.less";
</style>
<script>
    //引入productMsg组件
    import productMsg from "./component/productMsg.vue";
    export default{
        components:{
            productMsg:productMsg
        },
        data() {
            return {
                //商品详情信息
                productDetail:{},
                //喜欢商品的人数,用户图片
                love:{},
                //商品id
                id:1,
                msgBtnStatus:true,
                commentBtnStatus:false
            }
        },
        methods:{
            //获取商品的id
            getProductId:function(){
                if(this.$route.query.id) {
                    this.id = this.$route.query.id;
                    console.log(this.$route);
                    console.log(this.id);
                }
            },
            //请求商品id获取商品详情信息
            getProductDetail:function(){
                this.$http.get(`http://127.0.0.1:3000/getproductdetail?id=${this.id}`)
                    .then((data) => {
                        this.productDetail = data.body.data.data;
                        this.love = data.body.data.data.love;
                    },(error) => {
                        alert("服务器异常!")
                    });
            },
            //判断手机的系统
            getPhoneSystem:function(){
                console.log(navigator.appVersion);
                if(navigator.appVersion.indexOf("iPhone") > -1) {
                    alert("IOS系统");
                }else if(navigator.appVersion.indexOf("Android") > -1) {
                    alert("Android系统");
                }
            },
            changeMsgBtnStatus:function(){
                if(this.msgBtnStatus) {
                    this.commentBtnStatus =false;
                }else {
                    this.msgBtnStatus = true;
                    this.commentBtnStatus =false;
                }
            },
            changeCommentBtnStatus:function(){
                if(this.commentBtnStatus){
                    this.msgBtnStatus = false;
                }else {
                    this.commentBtnStatus = true;
                    this.msgBtnStatus = false;
                }
            }
        },
        created(){
            //当页面刷新的时候重置商品详情和累计评价按钮的样式
            this.msgBtnStatus = true;
            this.commentBtnStatus = false;
            this.getProductId();
            this.getProductDetail();
        }
    }
</script>
